<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, minimal-ui, viewport-fit=cover">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <title>My App</title>
    <link rel="stylesheet" href="../../packages/core/css/framework7.min.css">
  </head>
  <body>
    <div id="app">
      <div class="view view-main view-init">
        <div class="page">
          <div class="navbar">
            <div class="navbar-inner">
              <div class="left"></div>
              <div class="title">Sub Navbar</div>
              <div class="right"></div>
              <div class="subnavbar">
                <div class="subnavbar-inner">
                  <div class="segmented segmented-raised"><a class="button tab-link tab-link-active" href="#tab1">Tab 1</a><a class="button tab-link" href="#tab2">Tab 2</a><a class="button tab-link" href="#tab3">Tab 3</a></div>
                </div>
              </div>
            </div>
          </div>
          <div class="page-content hide-navbar-on-scroll">
            <div class="tabs">
              <div class="tab tab-active" id="tab1">
                <div class="block">
                  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nisi nisi, tincidunt ut eleifend non, sagittis a elit. Sed consequat odio at leo varius viverra. Proin et purus eu justo lacinia efficitur in sed orci. Morbi dignissim accumsan felis, at malesuada lorem aliquet finibus. Duis vitae enim a mauris luctus lobortis ac vel dolor. Aenean id pretium quam. Duis sed sem ullamcorper erat venenatis feugiat sed pretium magna. Suspendisse massa lectus, dictum congue arcu quis, auctor vulputate lectus. Duis vitae finibus purus, nec condimentum dui. Sed ultricies mauris vitae libero mollis lobortis. Duis ut tortor scelerisque, volutpat metus eget, rutrum est. Integer diam ex, condimentum vel orci a, lobortis bibendum urna. Aenean porttitor, eros sit amet ultrices efficitur, libero odio rhoncus justo, quis volutpat lorem arcu eu eros. Mauris gravida euismod diam, eget finibus quam ornare non. Nam metus massa, porttitor id tempor et, pharetra id felis.</p>
                  <p>In sed augue non metus volutpat ultricies in quis nisi. Donec sed placerat risus. Donec nec est turpis. Ut egestas ipsum eget lectus imperdiet dictum. Praesent congue dui nec turpis semper, pellentesque ullamcorper enim sodales. Quisque porttitor porta nibh, sit amet lacinia dui imperdiet et. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Cras a enim eget elit cursus ullamcorper fringilla eu mi. Integer commodo est elit, eu mattis quam ultrices non. Fusce in sagittis elit. Curabitur in consequat est. Nulla mi lorem, tincidunt eget dapibus id, ultrices vel sem. Etiam fringilla cursus odio, nec cursus nisi commodo quis. Nullam nec neque vel turpis eleifend condimentum sed quis felis. Integer ut diam nibh.</p>
                  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nisi nisi, tincidunt ut eleifend non, sagittis a elit. Sed consequat odio at leo varius viverra. Proin et purus eu justo lacinia efficitur in sed orci. Morbi dignissim accumsan felis, at malesuada lorem aliquet finibus. Duis vitae enim a mauris luctus lobortis ac vel dolor. Aenean id pretium quam. Duis sed sem ullamcorper erat venenatis feugiat sed pretium magna. Suspendisse massa lectus, dictum congue arcu quis, auctor vulputate lectus. Duis vitae finibus purus, nec condimentum dui. Sed ultricies mauris vitae libero mollis lobortis. Duis ut tortor scelerisque, volutpat metus eget, rutrum est. Integer diam ex, condimentum vel orci a, lobortis bibendum urna. Aenean porttitor, eros sit amet ultrices efficitur, libero odio rhoncus justo, quis volutpat lorem arcu eu eros. Mauris gravida euismod diam, eget finibus quam ornare non. Nam metus massa, porttitor id tempor et, pharetra id felis.</p>
                </div>
              </div>
              <div class="tab" id="tab2">
                <div class="block">
                  <p>Donec iaculis posuere massa sed dignissim. Praesent id nibh nec massa mollis egestas. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Duis elementum arcu nec condimentum eleifend. Aenean eget sapien ut diam egestas porttitor. Praesent quis diam fermentum, laoreet est consectetur, posuere enim. Morbi neque leo, vehicula at sapien ut, fringilla mollis enim. Cras sed libero mi. Etiam at vestibulum urna. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; In pharetra ut risus eu vehicula. Vestibulum interdum libero vestibulum nunc tempus vulputate. Etiam dolor lacus, porttitor pulvinar magna id, dictum hendrerit tortor.</p>
                  <p>Curabitur egestas, mi id mattis aliquam, lectus neque facilisis sem, in fringilla leo ante in nibh. Proin porta tincidunt dolor, vel fringilla lorem cursus ac. Suspendisse feugiat congue metus, sed mattis magna imperdiet sed. Donec a nunc quis urna bibendum feugiat. Nulla rhoncus lorem et orci condimentum molestie. Fusce fringilla arcu nec purus posuere malesuada. Praesent nec ipsum ex. Praesent sed diam non nisl imperdiet molestie.</p>
                  <p>Donec iaculis posuere massa sed dignissim. Praesent id nibh nec massa mollis egestas. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Duis elementum arcu nec condimentum eleifend. Aenean eget sapien ut diam egestas porttitor. Praesent quis diam fermentum, laoreet est consectetur, posuere enim. Morbi neque leo, vehicula at sapien ut, fringilla mollis enim. Cras sed libero mi. Etiam at vestibulum urna. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; In pharetra ut risus eu vehicula. Vestibulum interdum libero vestibulum nunc tempus vulputate. Etiam dolor lacus, porttitor pulvinar magna id, dictum hendrerit tortor.</p>
                  <p>Curabitur egestas, mi id mattis aliquam, lectus neque facilisis sem, in fringilla leo ante in nibh. Proin porta tincidunt dolor, vel fringilla lorem cursus ac. Suspendisse feugiat congue metus, sed mattis magna imperdiet sed. Donec a nunc quis urna bibendum feugiat. Nulla rhoncus lorem et orci condimentum molestie. Fusce fringilla arcu nec purus posuere malesuada. Praesent nec ipsum ex. Praesent sed diam non nisl imperdiet molestie.</p>
                </div>
              </div>
              <div class="tab" id="tab3">
                <div class="block">
                  <p>Etiam non interdum erat. Curabitur erat lacus, luctus ac varius vel, accumsan at mauris. Praesent aliquet placerat urna. Mauris mattis egestas dapibus. Integer vestibulum eget massa at maximus. Pellentesque et viverra magna. Donec eu porta nunc. Sed id velit et diam vehicula congue in eget risus. Quisque ullamcorper efficitur leo ac congue.</p>
                  <p>Duis ac semper risus. Suspendisse consectetur ligula tellus, at fermentum erat pulvinar vel. Nullam in magna sed felis posuere efficitur vel sed neque. Suspendisse nulla enim, sodales rutrum ultricies vitae, semper tempor odio. Nam rutrum non erat non</p>
                  <p>Etiam non interdum erat. Curabitur erat lacus, luctus ac varius vel, accumsan at mauris. Praesent aliquet placerat urna. Mauris mattis egestas dapibus. Integer vestibulum eget massa at maximus. Pellentesque et viverra magna. Donec eu porta nunc. Sed id velit et diam vehicula congue in eget risus. Quisque ullamcorper efficitur leo ac congue.</p>
                  <p>Duis ac semper risus. Suspendisse consectetur ligula tellus, at fermentum erat pulvinar vel. Nullam in magna sed felis posuere efficitur vel sed neque. Suspendisse nulla enim, sodales rutrum ultricies vitae, semper tempor odio. Nam rutrum non erat non</p>
                  <p>Etiam non interdum erat. Curabitur erat lacus, luctus ac varius vel, accumsan at mauris. Praesent aliquet placerat urna. Mauris mattis egestas dapibus. Integer vestibulum eget massa at maximus. Pellentesque et viverra magna. Donec eu porta nunc. Sed id velit et diam vehicula congue in eget risus. Quisque ullamcorper efficitur leo ac congue.</p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <script type="text/javascript" src="../../packages/core/js/framework7.min.js"></script>
    <script>
      var theme = 'ios';
      if (location.href.indexOf('theme=md') >= 0) theme = 'md';
      var plugin = {
        params: {
          theme: theme,
          root: '#app',
        }
      };
      if (Framework7.use) Framework7.use(plugin);
      else if (Framework7.Class && Framework7.Class.use) Framework7.Class.use(plugin);
      
    </script>
    <script>var app = new Framework7();</script>
  </body>
</html>